<template>
  <div class="goodsClassify">
    <page-search
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
    ></page-search>
    <page-content
      ref="pageContentRef"
      :contentTableConfig="contentTableConfig"
      pageName="goodsClassify"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
    ></page-content>
    <page-modal
      ref="pageModalRef"
      pageName="goodsClassify"
      :defaultInfo="defaultInfo"
      :modalConfig="modalConfigRef"
    ></page-modal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-modal'
import { useStore } from '@/store'
import { computed } from '@vue/runtime-core'

const [pageContentRef, handleQueryClick, handleResetClick]: [...any] =
  usePageSearch()
//pageModal相关
//处理展示密码逻辑
const newCallback = () => {
  const passwordItem = modalConfig.formItems.find(
    (item) => item.field === 'password'
  )
  passwordItem!.isHidden = false
}
const editCallback = () => {
  const passwordItem = modalConfig.formItems.find(
    (item) => item.field === 'password'
  )
  passwordItem!.isHidden = true
}
//动态添加部门和角色列表
//正常异步获取时会由于加载顺序等原因导致页面加载的时候 vuex中数据没有请求回来 所以为空值 需要computed监控一下
// const store = useStore()
const modalConfigRef = computed(() => {
  //   const departmentItem = modalConfig.formItems.find(
  //     (item) => item.field === 'departmentId'
  //   )
  //   const roleItem = modalConfig.formItems.find((item) => item.field === 'roleId')
  //   departmentItem!.options = store.state.entireDepartment.map((item) => {
  //     return { title: item.name, value: item.id }
  //   })
  //   roleItem!.options = store.state.entireRole.map((item) => {
  //     return { title: item.name, value: item.id }
  //   })
  return modalConfig
})

//调用hook获取公共变量及函数
const [pageModalRef, defaultInfo, handleEditData, handleNewData]: [...any] =
  usePageModal(newCallback, editCallback)
</script>

<style scoped></style>
